﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FPA.aspx.cs" Inherits="MutilFileUpload.FPA" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>baiduchajian</title>
    <link href="webuploader/demo.css" rel="stylesheet" />
    <link href="webuploader/style.css" rel="stylesheet" />
    <link href="webuploader/webuploader.css" rel="stylesheet" />
    <style>
        .demo{min-width:360px;margin:30px auto;padding:10px 20px}
        .demo h3{line-height:40px; font-weight: bold;}
        .file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
        .file-item .info{overflow: hidden;}
        .uploader-list{width: 100%; overflow: hidden;}
    </style>

    <script type="text/javascript" src="webuploader/jquery-1.12.1.js"></script>
    <script type="text/javascript" src="webuploader/webuploader.js"></script>
    <script type="text/javascript" src="webuploader/upload.js"></script>
    


    <script type="text/javascript">
        jQuery(function () {
            var $ = jQuery,
        $list = $('#thelist'),

        uploader;
            uploader = WebUploader.create({

                // swf文件路径
                swf: 'webuploader/Uploader.swf',

                // 文件接收服务端。
                server: 'Ashx/FileUpload.ashx',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false
            });

            state = 'ready',
        $upload = $('#ctlBtn'),

            // 当有文件被添加进队列的时候
        uploader.on('fileQueued', function (file) {
            $list.append('<div id="' + file.id + '" class="item">' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
            '</div>');
        });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
//                var $li = $('#' + file.id),
//                $percent = $li.find('.progress .progress-bar');

//                // 避免重复创建
//                if (!$percent.length) {
//                    $percent = $('<div class="progress progress-striped active">' +
//                                 '<div class="progress-bar" role="progressbar" style="width: 0%;height:38px;">' +
//                                 '</div>' +
//                                 '</div>').appendTo($li).find('.progress-bar');
//                }

//                $li.find('p.state').text('上传中');

                //                $percent.css('width', percentage * 100 + '%');

                var $li = $('#' + file.id),
            $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
              '<div class="progress-bar" role="progressbar" style="width: 0%">' +
              '</div>' +
            '</div>').appendTo($li).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css('width', percentage * 100 + '%');

                
            });

            uploader.on('uploadSuccess', function (file) {
                $('#' + file.id).find('p.state').text('已上传');
            });

            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });

            uploader.on('uploadComplete', function (file) {
                //$('#' + file.id).find('.progress').fadeOut();
            });

            //上传按钮
            $upload.on('click', function () {
                if ($(this).hasClass('disabled')) {
                    return false;
                }
                
                if (state === 'ready') {
                    uploader.upload();
                } else if (state === 'paused') {
                    uploader.upload();
                } else if (state === 'uploading') {
                    uploader.stop();
                }
            });

            $upload.addClass('state-' + state);


        });
</script> 


</head>
<body>
 
        
   <div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"></div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <button id="ctlBtn" class="btn btn-default">开始上传</button>
    </div>
    </div> 

</body>
</html>
